<script setup lang="ts">
import { ref } from 'vue';
import type { IHomeInfo, ICountdown } from '@/types';
import TheTop from './components/TheTop.vue'
import SearchView from '../../search/SearchView.vue'
import { useToggle } from './../../../hooks/useToggle';
import { useAsync } from './../../../hooks/useAsync';
import { fetchHomePageData } from './../../../api/home';
import OpLoading from './../../../components/OpLoading.vue'
import TheTransformer from './components/TheTransformer.vue'
import ScrollBar from './components/ScrollBar.vue'
import CountDown from './components/CountDown.vue'
import Swipe from './components/Swipe.vue'
import { PRIMARY_COLOR, TRANSPARENT } from '../../../connfig'
import { HOME_TABS } from './config'

// 自定义钩子函数useToggle控制首页和搜索页的切换
const [isShowSearchView, toggleSearchView] = useToggle(false)

const { data, pending } = useAsync(fetchHomePageData, {
    banner: [],
    searchRecomments: [],
    transformer: [],
    scrollBarInfoList: [],
    countdown: {} as ICountdown,
    activities: []
} as IHomeInfo)

const tabBackgroundColor = ref(TRANSPARENT)

const onTabScroll = ({ isFixed }: { isFixed: boolean }) => {
    tabBackgroundColor.value = isFixed ? 'white' : TRANSPARENT
}

</script>

<template>
    <div class="home-page">
        <!-- 搜索页面组件 -->
        <Transition name="fade">
            <SearchView v-if="isShowSearchView" @cancel="toggleSearchView"></SearchView>
        </Transition>
        <div v-show="!isShowSearchView">
            <!-- 顶部 -->
            <TheTop :recomments="data.searchRecomments" @searchClick="toggleSearchView" />
            <!-- 骨架屏加载 -->
            <OpLoading :loading="pending" type="skeleton">
                <!-- banner图片区 -->
                <div class="home-page__banner">
                    <img v-for="v in data.banner" :key="v.imgUrl" :src="v.imgUrl" />
                </div>
                <!-- 金刚位展示区 -->
                <TheTransformer :data="data.transformer" />
                <!-- 上下滚动播报组件 -->
                <ScrollBar :data="data.scrollBarInfoList" />
                <div class="home-page__activity">
                    <!-- 倒计时组件 -->
                    <CountDown :data="data.countdown"/>
                    <!-- 轮播图 -->
                    <Swipe :data="data.activities" />
                </div>
                <VanTabs
                    sticky
                    offsetTop="54px"
                    :color="PRIMARY_COLOR"
                    :background="tabBackgroundColor"
                    @scroll="onTabScroll"
                >
                    <VanTab v-for="v in HOME_TABS" :key="v.value" :title="v.title">
                        <component :is="v.component"></component>
                    </VanTab>
                </VanTabs>
            </OpLoading>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
.home-page {
    background: var(--op-gray-bg-color);
    padding-bottom: 70px;
    &__banner {
        img {
            width: 100%;
            padding-top: 10px;
            background: white;
        }
    }
    &__activity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }
}
</style>